<template>
  <div class="mine">
    <Navbar></Navbar>

    <!-- 我的信息 -->
    <van-cell :title="user">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #icon>
        <van-image :src="logoImage" width="50" height="50" round class="myLogo" />
      </template>
      <template #label>
        <p class="level">段位：学富五车</p>
      </template>
    </van-cell>

    <!-- 我的列表 -->
    <van-cell title="我的积分" icon="balance-o" is-link/>
    <van-cell title="我的收藏" icon="star-o" is-link/>
    <van-cell title="我的留言" icon="comment-o" is-link/>
    <van-cell title="我的已购" icon="balance-pay" is-link/>
    <van-cell title="我的学习" icon="records-o" is-link/>


    <Tabbar></Tabbar>
  </div>
</template>

<script setup>
import Navbar from "@/components/Navbar.vue";
import Tabbar from "@/components/Tabbar.vue";
import logoImage from "@/assets/img/profile.png";
import { ref, onMounted } from "vue";

const user =  ref("");
onMounted(() => {
  user.value = sessionStorage.getItem("username");
});
</script>

<style scoped>
.level {
    margin-top: 0;
}
.myLogo {
    margin-right: 10px;
}
</style>